import { App, createApp, defineComponent, onMounted, ref, watch } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { zhCn } from 'element-plus/es/locales.mjs'
import { CommonDialog } from 'ikun-pro-ui'
interface DialogParmas {
	content?: any
	title: string
}
let dialog: any
class DialogService {
	app?: App<Element>
	showDialog(params: DialogParmas) {
		let dom: any = document.createElement('div')
		document.body.appendChild(dom)
		const app = this.app
		dialog = defineComponent({
			setup() {
				const visible = ref<boolean>(false)
				onMounted(() => {
					visible.value = true
				})
				watch(
					() => visible.value,
					val => {
						if (!val) {
							app?.unmount()
						}
					}
				)
				return {
					visible
				}
			},
			render() {
				return (
					<div class='asdad'>
						<CommonDialog showClose={false} draggable={true} v-model={this.visible} modal={true} modalClose={false}>
							{{
								default: () => {
									return params.content
								},
								header: () => {
									return (
										<div>
											<span>{params.title}</span>
											<span>-X</span>
										</div>
									)
								}
							}}
						</CommonDialog>
					</div>
				)
			}
		})
		this.app = createApp(dialog)
		this.app
			.use(ElementPlus, {
				locale: zhCn
			})
			.mount(dom)
	}
}
let instance: DialogService
export const getDialogService = () => {
	if (!instance) {
		instance = new DialogService()
	}
	return instance
}
export declare type DialogServiceInstance = InstanceType<typeof dialog>
